<template>
    <div>
        <el-card class="card-box">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <mytitle>基本信息</mytitle>
                    <el-form-item label="种植编号" style="width: 320px;" v-if="ruleForm.plantId">
                        <el-input type="text" v-model="ruleForm.plantId" disabled />
                    </el-form-item>
                    <el-form-item label="地块" prop="landId" style="width: 320px;">
                        <el-select
                            v-model="ruleForm.landId"
                            multiple
                            :disabled="!shows"
                            clearable
                            collapse-tags
                            @change="landChange"
                            placeholder="请选择地块">
                            <el-option
                            v-for="item in optionLand"
                            :key="item.value"
                            :label="item.landName"
                            :value="item.landId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="种植批号" prop="batch" style="width: 400px;" v-if="ruleForm.landId.length>0">
                        <el-select
                            v-model="ruleForm.batch"
                            :disabled="!shows"
                            @change="benchChange"
                            placeholder="请选择种植批号">
                            <el-option
                            v-for="item in optionBatch"
                            :key="item.value"
                            :label="item"
                            :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <div></div>
                    <el-form-item label="人员" prop="operatorId">
                        <el-select
                            v-model="ruleForm.operatorId"
                            placeholder="请选择人员">
                            <el-option
                            v-for="(item,index) in options"
                            :key="index"
                            :label="item.name"
                            :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-table ref="singleTable" :header-cell-style="{ color: '#292B2B', background: '#EAF9F4' }"
                        :data="tableData" border style="width: 50%;margin: 20px 0;">
                        <el-table-column type="index" label="序号" width="50" align="center" />
                        <el-table-column prop="plantId" label="果树编号"  align="center"
                            :show-overflow-tooltip="true" />
                        <el-table-column prop="variety" label="果树品种" width="200" align="center" />
                        <el-table-column prop="addTime" label="添加时间" width="200" align="center" />
                    </el-table>
                    <div class="pagination-box">
                        <el-pagination
                        background
                        @current-change="handleCurrentChange"
                        :current-page.sync="treeInfo.pageNum"
                        :page-size="treeInfo.pageSize"
                        layout="total, prev, pager, next"
                        :total="total">
                        </el-pagination>
                    </div>
                    <mytitle>配置信息</mytitle>
                    <div style="width: 100%;font-size: 16px;font-weight: 600;">租金配置</div>
                    <el-form-item label="一年" prop="rentConfiguration.year" style="width: 320px;">
                        <el-input type="number" v-model="ruleForm.rentConfiguration.year">
                            <template slot="append">元</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="六个月" prop="rentConfiguration.six" style="width: 320px;">
                        <el-input type="number" v-model="ruleForm.rentConfiguration.six">
                            <template slot="append">元</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="三个月" prop="rentConfiguration.three" style="width: 320px;">
                        <el-input type="number" v-model="ruleForm.rentConfiguration.three">
                            <template slot="append">元</template>
                        </el-input>
                    </el-form-item>
                    <div></div>
                    <el-form-item>
                        <el-button @click="$router.go(-1)" type="success" plain>取消</el-button>
                        <el-button @click="submitForm('ruleForm')" type="success">确认配置</el-button>
                    </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>
<script>
import { findFruitTree, findAllLand, findAllOperator, compileLandMsg, findAllBatchNumber } from '../util/api.js'
export default {
    data() {
        return {
            shows: true,
            tableData: [],
            ruleForm: {
                batch: "",
                operatorId: "",//
                plantId: "",//
                landId:[],
                rentConfiguration: {
                    year: "",//一年
                    six: "",//六个月
                    three: "",//三个月
                },
                sign:1
            },
            total:0,
            treeInfo:{
                plantId:"",
                batch:"",
                pageNum:1,
                pageSize:6,
            },
            optionLand: [],
            optionBatch:[],
            options: [],
            rules: {
                batch: [
                    { required: true, message: '请选择批次', trigger: 'change' },
                ],
                landId: [
                    { required: true, message: '请选择地块', trigger: 'change' },
                ],
                operatorId: [
                    { required: true, message: '请选择人员', trigger: 'change' }
                ],
                'rentConfiguration.year': [
                    { required: true, message: '请输入一年租金', trigger: 'blur' },
                ],
                'rentConfiguration.six': [
                    { required: true, message: '请输入六个月租金', trigger: 'blur' },
                ],
                'rentConfiguration.three': [
                    { required: true, message: '请输入三个月租金', trigger: 'blur' },
                ],
            }
        }
    },
    mounted() {
        if(this.$route.query.row){
            let row = JSON.parse(this.$route.query.row)
             this.shows = false
             this.ruleForm.batch = row.batch
             this.ruleForm.operatorId = row.operatorId
             this.ruleForm.plantId = row.plantId
             this.ruleForm.landId.push(row.landId)
             this.treeInfo.plantId = row.plantId
             this.treeInfo.batch = row.batch
             this.getTable()
        }
        this.getLands()
        this.findAllOperator()  
    },
    methods: {
        async getLands() {
            let res = await findAllLand()
            if (res.code != 200) return
            // console.log(res)
            this.optionLand = res.data
        },
        async getTable() {
            console.log(this.treeInfo)
            let res = await findFruitTree(this.treeInfo)
            if (res.code != 200) return
            // console.log(res)
            this.tableData = res.data.rows
            this.total = res.data.total
            if(res.data.rows.length>0){
                this.ruleForm.rentConfiguration=JSON.parse(res.data.rows[0].rentConfiguration)
            }
        },
        async findAllOperator() {
            let res = await findAllOperator()
            // console.log(res)
            if (res.code != 200) return
            this.options = res.data
        },
        async landChange() {
            if(this.ruleForm.landId.length>0){
                let res = await findAllBatchNumber(this.ruleForm.landId)
                // console.log(res)
                if (res.code != 200) return
                this.optionBatch =res.data
            } 
        },
        benchChange(){
            if(this.ruleForm.batch){
                this.treeInfo.batch=this.ruleForm.batch
                this.getTable()
            }
        },
        handleCurrentChange(val) {
            this.treeInfo.pageNum = val
            this.getTable()
          // console.log(`当前页: ${val}`);
       },
        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    let datas =JSON.parse(JSON.stringify(this.ruleForm)) 
                    delete datas.landId
                    let res = await compileLandMsg(datas)
                    console.log(datas)
                    if (res.code != 200) return
                    this.$message.success('编辑成功！')
                    this.$router.go(-1)
                } else {
                    // console.log('error submit!!');
                    return false;
                }
            });
        },
    }
}
</script>
<style lang="less" scoped>
.card-box {
    width: 100%;
    height: 100%;

    .avatar {
        width: 146px;
        height: 146px;
        border-radius: 5px;
    }

    .demo-ruleForm {
        width: 100%;

        .el-form-item {
            display: inline-block;
        }
    }
}

/deep/.is-checked .el-radio__label {
    color: #01B780 !important;
}

/deep/.is-checked .el-radio__inner {
    color: #01b780 !important;
    background-color: #01B780 !important;
}

.totalArea {
    width: 100%;

    .totalArea-item {
        display: flex;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        text-align: center;
        gap: 10px;
        margin: 10px 0;
    }
}</style>
